<template>
    <el-container style="height: 100vh; position: relative;">
        <!-- 静态地图作为背景 -->
        <div v-if="mapUrl" class="map-background">
            <img :src="mapUrl" alt="南京静态地图" />
        </div>

        <!-- 搜索框 -->
        <el-header style="background-color: transparent; padding: 10px 0; position: relative; z-index: 10;">
            <div style="display: flex; justify-content: center;">
                <el-input v-model="keyword" placeholder="请输入关键词" clearable style="width: 300px; margin-right: 10px;" />
                <el-button type="primary" @click="searchPlace">位置搜索</el-button>
            </div>
        </el-header>

        <!-- 运单表（定位到左侧，显示在地图上方）-->
        <el-table :data="tableData" class="waybill-table" style="z-index: 15;" :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="运单号" width="180">
                <template slot-scope="scope">
                    <el-link type="primary" @click="queryVisibleBtn(scope.row.id)">
                        {{ scope.row.id }}
                    </el-link>
                </template>
            </el-table-column>
        </el-table>


        <!-- 分页 -->
        <el-row>
            <el-col :span="24">
                <!-- <el-pagination background :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" :current-page="pageNum"
                    layout="total,sizes,prev, pager, next,jumper" :total="total">
                </el-pagination> -->
                <el-pagination small layout="prev, pager, next,total" :total="total" :page-size="pageSize"
                    :current-page="pageNum" @prev-click="prePage" @next-click="nextPage" @current-change="curPage"
                    @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>


        <!-- 搜索结果 -->
        <el-main
            style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; position: relative; z-index: 10;">
            <div v-if="results && results.length > 0" style="margin-top: 20px; width: 80%;">
                <h3>搜索结果：</h3>
                <el-table :data="results" style="width: 100%;">
                    <el-table-column prop="name" label="名称" width="180" />
                    <el-table-column prop="address" label="地址" width="300" />
                    <el-table-column prop="location" label="位置" width="200" />
                </el-table>
            </div>

            <div v-else-if="results && results.length === 0" style="margin-top: 20px;">
                <el-alert title="没有找到相关结果" type="info"></el-alert>
            </div>
        </el-main>


        <!-- 弹窗 -->
        <el-dialog title="详情页" :visible.sync="queryVisible">
            <el-form>

                <el-form-item label="运单号" label-width="80px">
                    <el-input v-model="query.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="运单状态" label-width="80px">
                    <el-select placeholder="请选择" style="width: 120px;" v-model="query.status" disabled>
                        <el-option label="未完成" value="7"></el-option>
                        <el-option label="待接单" value="1"></el-option>
                        <el-option label="待提单" value="2"></el-option>
                        <el-option label="待发车" value="3"></el-option>
                        <el-option label="运输中" value="4"></el-option>
                        <el-option label="代签收" value="5"></el-option>
                        <el-option label="已完成" value="6"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="始发地" label-width="80px">
                    <el-input v-model="query.name2" disabled></el-input>
                </el-form-item>


                <el-form-item label="目的地" label-width="80px">
                    <el-input v-model="query.name4" disabled></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="queryVisible = false">确 定</el-button>
            </div>
        </el-dialog>

    </el-container>
</template>

<script>
export default {
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,

            tableData: [], // 运单数据
            queryVisible: false,
            query: {},

            keyword: '',
            results: null,
            mapUrl: '', // 南京的静态地图
        };
    },
    methods: {
        searchPlace() {
            this.$axios.get(`api/amap/search`, {
                params: { keyword: this.keyword },
            })
                .then(response => {
                    this.results = response.data.pois; // 假设返回数据中包含 pois
                    console.log(this.results); // 打印返回的结果
                })
                .catch(error => {
                    console.error('搜索失败:', error);
                });
        },
        setMapLocation() {
            this.$axios.get('api/amap/staticMap', {
                params: { location: '118.767413,32.041544' }, // 传递位置参数
                responseType: 'blob' // 告诉 axios 接收二进制数据
            })
                .then(response => {
                    const url = URL.createObjectURL(response.data);  // 将 Blob 转化为 URL
                    this.mapUrl = url;  // 设置地图URL
                })
                .catch(error => {
                    console.error('加载地图失败:', error);
                });
        },

        queryByWailly() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/exception/queryWall', pageParam)
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;
                    }
                })
        },

        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 0) {
                return 'success-row';
            } else {
                return 'warning-row';
            }
        },


        /**
         * 探窗按钮
         */
        queryVisibleBtn(id) {
            this.$axios.get('api/exception/queryByWaybillId/' + id)
                .then(response => {
                    if (response.data.code == 200) {
                        this.query = response.data.data;
                        this.queryVisible = true;
                    }
                })
        },



         // 点击上一页
         prePage() {
            if (this.pageNum > 1) {
                this.pageNum--;
                this.queryAll(); // 更新数据
            }
        },

        // 点击下一页
        nextPage() {
            if (this.pageNum < Math.ceil(this.total / this.pageSize)) {
                this.pageNum++;
                this.queryAll(); // 更新数据
            }
        },

        // 页码变化
        curPage(pageNum) {
            this.pageNum = pageNum;
            this.queryAll(); // 更新数据
        },

        // 每页显示条数变化
        sizeChange(pageSize) {
            this.pageSize = pageSize;
            this.pageNum = 1; // 每页条数变化时，回到第一页
            this.queryAll(); // 更新数据
        },



    },
    mounted() {
        this.queryByWailly();
        this.setMapLocation();
    },
};
</script>

<style scoped>
/* 下面两个样式不用删，自己加的深度选择器 */
::v-deep .warning-row {
    background: oldlace;
}

::v-deep .success-row {
    background: #f0f9eb;
}

/* 全屏地图背景样式 */
.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.map-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持图像纵横比 */
}

/* 运单表样式，固定在左侧，设置较小宽度 */
.waybill-table {
    position: absolute;
    top: 100px;
    /* 调整表格距离顶部的距离 */
    left: 0;
    /* 固定表格在页面左侧 */
    width: 200px;
    /* 设置表格宽度，适应一列 */
    z-index: 10;
    /* 确保表格位于地图上方 */
    background-color: white;
    /* 给表格添加背景，避免地图干扰可读性 */
    border: 1px solid #e4e4e4;
    /* 表格边框 */
}



.el-container {
    z-index: 10;
    position: relative;
}

.el-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-list-item {
    transition: background-color 0.3s;
}

.el-list-item:hover {
    background-color: #f0f0f0;
    /* 鼠标悬停效果 */
}

.el-table th,
.el-table td {
    text-align: center;
    /* 文字居中 */
}
</style>